import React, { useCallback } from 'react'
import { Select, Input, MessagePlugin, } from 'tdesign-react'
import { useOutletContext } from 'react-router-dom';

const judgmentOptions = [
  { label: '简单', value: 0 },
  { label: '一般', value: 1 },
  { label: '困难', value: 2 }
]
const RandomTopic = () => {
  const { getshortLength, getjudgementLength, getoptionLength, getradioLength, options, radioNum,
    optionsNum, judgmentNum, shortNum, topic, handleChange1, handleChange2, handleChange3, handleChange4,
    handleChange5, handleChange6, handleChange7, handleChange8, handleChange9, handleChange10,
    handleChange11, handleChange12, handleChange13, handleChange14, handleChange15, handleChange16 } = useOutletContext()
  return (
    <div id='randomTopic'>
      <div className="line">
        <div className="title">单选题：</div>
        <div className="col3">
          <div className="top">抽题范围</div>
          <Select
            style={{ width: '70%' }}
            filterable
            multiple
            onBlur={getradioLength}
            value={topic.radio && topic.radio.range}
            onChange={handleChange1}
            options={options}
            onRemove={(options) => {
              console.log('onRemove', options);
            }}
          >
          </Select>
        </div>
        <div className="col3">
          <div className="top">难度</div>
          <Select value={topic.radio && topic.radio.judgment} style={{ width: '70%' }} options={judgmentOptions} onChange={handleChange2}></Select>
        </div>
        <div className="col3">
          <div className="top">抽取数量（可抽取{radioNum}）</div>
          <Input
            value={topic.radio && topic.radio.num}
            style={{ width: '60%' }}
            onChange={(e) => handleChange3(e)}></Input>
        </div>
        <div className="col3">
          <div className="top">每题分数</div>
          <Input value={topic.radio && topic.radio.fraction} style={{ width: '60%' }} onChange={(e) => handleChange4(e)}></Input>
        </div>
      </div>
      <div className="line">
        <div className="title">多选题：</div>
        <div className="col3">
          <div className="top">抽题范围</div>
          <Select
            style={{ width: '70%' }}
            onChange={handleChange5}
            filterable
            multiple
            onBlur={getoptionLength}
            value={topic.options && topic.options.range}
            options={options}
            onRemove={(options) => {
              console.log('onRemove', options);
            }}
          >
          </Select>
        </div>
        <div className="col3">
          <div className="top">难度</div>
          <Select value={topic.options && topic.options.judgment} style={{ width: '70%' }} options={judgmentOptions} onChange={handleChange6}></Select>
        </div>
        <div className="col3">
          <div className="top">抽取数量（可抽取{optionsNum}）</div>
          <Input
            value={topic.options && topic.options.num}
            style={{ width: '60%' }}
            onChange={(e) => handleChange7(e)}></Input>
        </div>
        <div className="col3">
          <div className="top">每题分数</div>
          <Input value={topic.options && topic.options.fraction} style={{ width: '60%' }} onChange={(e) => handleChange8(e)}></Input>
        </div>
      </div>
      <div className="line">
        <div className="title">判断题：</div>
        <div className="col3">
          <div className="top">抽题范围</div>
          <Select
            style={{ width: '70%' }}
            onChange={handleChange9}
            filterable
            multiple
            onBlur={getjudgementLength}
            value={topic.judgment && topic.judgment.range}
            options={options}
            onRemove={(options) => {
              console.log('onRemove', options);
            }}
          >
          </Select>
        </div>
        <div className="col3">
          <div className="top">难度</div>
          <Select value={topic.judgment && topic.judgment.judgment} style={{ width: '70%' }} options={judgmentOptions} onChange={handleChange10}></Select>
        </div>
        <div className="col3">
          <div className="top">抽取数量（可抽取{judgmentNum}）</div>
          <Input
            value={topic.judgment && topic.judgment.num}
            style={{ width: '60%' }}
            onChange={(e) => handleChange11(e)}></Input>
        </div>
        <div className="col3">
          <div className="top">每题分数</div>
          <Input value={topic.judgment && topic.judgment.fraction} style={{ width: '60%' }} onChange={(e) => handleChange12(e)}></Input>
        </div>
      </div>
      <div className="line">
        <div className="title">简答题：</div>
        <div className="col3">
          <div className="top">抽题范围</div>
          <Select
            style={{ width: '70%' }}
            onChange={handleChange13}
            filterable
            multiple
            onBlur={getshortLength}
            value={topic.short && topic.short.range}
            options={options}
            onRemove={(options) => {
              console.log('onRemove', options);
            }}
          >
          </Select>
        </div>
        <div className="col3">
          <div className="top">难度</div>
          <Select value={topic.short && topic.short.judgment} style={{ width: '70%' }} options={judgmentOptions} onChange={handleChange14}></Select>
        </div>
        <div className="col3">
          <div className="top">抽取数量（可抽取{shortNum}）</div>
          <Input
            value={topic.short && topic.short.num}
            style={{ width: '60%' }}
            onChange={(e) => handleChange15(e)}></Input>
        </div>
        <div className="col3">
          <div className="top">每题分数</div>
          <Input value={topic.short && topic.short.fraction} style={{ width: '60%' }} onChange={(e) => handleChange16(e)}></Input>
        </div>
      </div>
    </div>
  )
}

export default RandomTopic
